<template>
    <el-dialog :title="title" :visible.sync="dialogVisible" :before-close="handleClose" :close-on-click-modal="false">
        <el-form :model="dialogForm" size="small" :rules="rules" ref="dialogFormRef">
            <el-form-item prop="variableName" label="变量名称">
                <el-input v-model="dialogForm.variableName" :disabled="disabled" placeholder="请输入"/>
            </el-form-item>
            <el-form-item prop="variableCode" label="变量编码">
                <el-input v-model="dialogForm.variableCode" :disabled="disabled" placeholder="请输入"/>
            </el-form-item>
            <el-form-item prop="variableNamespace" label="变量名空间">
                <el-input v-model="dialogForm.variableNamespace" :disabled="disabled" placeholder="请输入"/>
            </el-form-item>
            <el-form-item prop="variableType" label="变量类型">
                <el-select v-model="dialogForm.variableType" :disabled="disabled" style="width:100%" @change="handleVariableTypeChange">
                    <el-option v-for="(item,index) in variableTypeList" :key="'variableType'+index" :label="item.name" :value="item.type"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="variableSubTypes" label="变量子类型">
                <el-select v-model="dialogForm.variableSubTypes" :disabled="disabled" multiple style="width:100%">
                    <el-option v-for="(item,index) in subVariableTypeList" :key="'variableType'+index" :label="item.name" :value="item.type"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item prop="variableConfig.variableViewType" label="变量前端类型">
                <el-input v-model="dialogForm.variableConfig.variableViewType" :disabled="disabled" placeholder="请输入"/>
            </el-form-item>
            <el-form-item prop="variableViewConfig" label="变量前端配置">
                <el-input v-model="dialogForm.variableConfig.variableViewConfig" :disabled="disabled" placeholder="请输入" type="textarea" :autosize="{minRows:4}"/>
            </el-form-item>
            <el-form-item prop="buildFromScratch" label="不使用已存储变量构建内容">
                <el-checkbox v-model="dialogForm.variableConfig.buildFromScratch"/>
            </el-form-item>
            <el-form-item prop="saveInitLoadQuery" label="是否保存初始加载值">
                <el-checkbox v-model="dialogForm.saveInitLoadQuery"/>
            </el-form-item>
            <el-form-item prop="variableInitExpress" label="初始化值表达式">
                <el-input v-model="dialogForm.variableInitExpress" :disabled="disabled" placeholder="请输入" type="textarea" :autosize="{minRows:4}"/>
            </el-form-item>
            <el-form-item prop="variableDescribe" label="变量描述">
                <el-input v-model="dialogForm.variableDescribe" :disabled="disabled" placeholder="请输入"/>
            </el-form-item>
            <el-form-item prop="variableInputSchema" label="变量输入的Jsonschema">
                <el-input v-model="dialogForm.variableInputSchema" :disabled="disabled" placeholder="请输入" type="textarea" :autosize="{minRows:4}"/>
            </el-form-item>
            <el-form-item prop="preprocessExpress" label="数据前处理脚本">
                <el-button size="small" type="primary" :disabled="disabled" @click="handleAddPreprocessExpress">新增</el-button>
                <el-card v-for="(element,ind) in dialogForm.preprocessExpress" :key="'preprocessExpress'+ind" style="width:100%; margin-top: 12px;">
                    <el-row :gutter="10">
                        <el-col :span="24">
                            
                            <div class="card-top">
                                <div>表达式：</div>
                                <div class="card-delete" @click="handlePreprocessExpressDelete(ind)" v-if="!disabled"><i class="el-icon-close" ></i></div>
                            </div>
                            <el-input v-model="element.processExpress" :disabled="disabled" placeholder="请输入" type="textarea" :autosize="{minRows:4}"/>
                            子类型：
                            <el-select v-model="element.variableSubType" :disabled="disabled" style="width:100%">
                                <el-option v-for="(item,index) in subVariableTypeList" :key="'variableType'+index" :label="item.name" :value="item.type"></el-option>
                            </el-select>
                        </el-col>
                    </el-row>
                </el-card>
            </el-form-item>
            <el-form-item prop="postprocessExpress" label="数据后处理脚本">
                <el-input v-model="dialogForm.postprocessExpress" :disabled="disabled" placeholder="请输入" type="textarea" :autosize="{minRows:4}"/>
            </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button @click="handleClose">取 消</el-button>
            <el-button type="primary" @click="handleSure" v-if="!disabled">确 定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import { addDocumentVariable,editDocumentVariable,getVariableTypeList } from '@/api/variable.js'
export default {
    name:'VariableDialog',
    props:{
        datas:{
            type:Object,
            default:()=> ({})
        },
        type:{
            type:String,
            default:'add'
        }
    },
    data () {
        return {
            title:'',
            dialogVisible:true,
            dialogForm:{
                variableName: '',
                variableCode: '',
                variableDescribe: '',
                variableNamespace: '',
                variableSubTypes: [],
                variableConfig:{
                    buildFromScratch:false,
                    variableViewConfig: '',
                    variableViewType: ''
                },
                saveInitLoadQuery: false,
                variableInitExpress:'',
                variableType: '',
                variableInputSchema: '',
                postprocessExpress:'',
                preprocessExpress:[]
            },
            disabled:false,
            rules: {
                variableName:[{ required: true, message: '变量名称不能为空', trigger: 'blur' }],
                variableCode: [{ required: true, message: '变量编码不能为空', trigger: 'blur' }],
                variableNamespace:[{ required: true, message: '变量名空间不能为空', trigger: 'blur' }],
                variableType: [{ required: true, message: '变量类型不能为空', trigger: 'blur' }],
                variableSubTypes: [{ required: true, message: '变量子类型不能为空', trigger: 'blur' }],
                'variableConfig.variableViewType':[{ required: true, message: '变量前端类型不能为空', trigger: 'blur' }],
            },
            variableTypeList:[],
            subVariableTypeList:[]
        }
    },
    mounted(){
        this.initData()
        this.getOptions()
    },
    methods: {
        initData(){
            if(this.type !== 'add'){
                this.dialogForm = {
                    id:this.datas.id,
                    variableName: this.datas.variableName,
                    variableCode: this.datas.variableCode,
                    variableDescribe: this.datas.variableDescribe,
                    variableNamespace: this.datas.variableNamespace,
                    saveInitLoadQuery:this.datas.saveInitLoadQuery,
                    variableInitExpress:this.datas.variableInitExpress,
                    variableSubTypes: this.datas.variableSubTypes ? this.datas.variableSubTypes : [],
                    variableConfig:{
                        buildFromScratch: this.datas.variableConfig? this.datas.variableConfig?.buildFromScratch :false ,
                        variableViewConfig: this.datas.variableConfig?.variableViewConfig,
                        variableViewType:this.datas.variableConfig?.variableViewType
                    },
                    variableType: this.datas.variableType,
                    variableInputSchema: this.datas.variableInputSchema,
                    postprocessExpress:this.datas.postprocessExpress,
                    preprocessExpress:this.datas.preprocessExpress ? this.datas.preprocessExpress : []
                }
            }
            if(this.type === 'view'){
                this.disabled  = true
            }
        },
        getOptions(){
            getVariableTypeList().then(res => {
                this.variableTypeList = res.data
                const obj = this.variableTypeList.find(item => item.type === this.dialogForm.variableType);
                if(obj){
                    this.subVariableTypeList = obj.subType
                    // this.dialogForm.variableSubTypes = [obj.subType[0].type]
                }
            })
        },
        handleClose(){
            this.$emit('on-close')
        },
        handleVariableTypeChange(val){
            const obj = this.variableTypeList.find(item => item.type === val);
            console.log(obj,val)
            if(obj){
                this.subVariableTypeList = obj.subType
                //this.dialogForm.variableSubTypes = [obj.subType[0].type]
            }
            
        },
        handleSure(){
            this.$refs.dialogFormRef.validate((valid) => {
                if (valid) {
                    if(this.type === 'add'){
                        addDocumentVariable(this.dialogForm).then(res => {
                            this.$emit('on-sure')
                            this.$emit('on-close')
                            this.$message.success('添加成功！')
                        })
                    }else{
                        editDocumentVariable(this.dialogForm).then(res => {
                            this.$emit('on-sure')
                            this.$emit('on-close')
                            this.$message.success('编辑成功！')
                        })
                    }
                    
                }else{
                    this.$message.error('信息填写不完整！')
                }
            })
        },
        handleAddPreprocessExpress(){
            const obj = {
                processExpress: '',
                variableSubType: ''
            }
            this.dialogForm.preprocessExpress.push(obj)
        },
        handlePreprocessExpressDelete(index){
            this.dialogForm.preprocessExpress.splice(index,1)
        }
    }

}
</script>

<style scoped>
.card-top{
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.card-delete{
    cursor: pointer;
}
.card-delete:hover{
    color: #f00;;
}
</style>